/**
 * pitch loader处理css文件：动态创建style标签，插入到页面中
 * @param content
 * @param sourceMap
 * @param meta
 */
module.exports = function (content, sourceMap, meta) {

  /*
  * 遇到了问题：
  * 1、直接使用style-loader，只能处理样式；不能处理样式中引入的其他资源
  * 使用： use:['style-loader']
  *
  * 2、借助css-loader解决样式中引入的其他资源的问题
  * 使用： use:['style-loader','css-loader']
  * 问题是css-loader暴露了一段js代码，style-loader需要执行js代码，得到返回值，再动态创建style标签，插入到页面上，不好操作
  *
  * 3、style-loader使用pitch loader用法解决
  *
  **/
  // return `
  //   const styleEle = document.createElement('style');
  //   styleEle.innerHtml = ${JSON.stringify(content)};
  //   document.head.appendChild(styleEle)
  // `
}

module.exports.pitch = function (remainingRequest) {
  // remainingRequest 剩下还需要处理的loader

  // 1、将 remainingRequest 中绝对路径改成相对路径（因为后面只能使用相对路劲操作）
  const relativePath = remainingRequest.split("!").map(absolutePath => {
    return this.utils.contextify(this.content, absolutePath)
  })

  // 2、引入 css-loader 处理后的资源
  // 3、动态创建style标签，将内容插入页面中生效
  // return 终止后面 loader 执行

  return `
    import style from "!!${relativePath}";
    const styleEle = document.createElement('style');
    styleEle.innerHtml = style;
    document.head.appendChild(styleEle)
  `
}
